import React from 'react'
import { bindActionCreators } from "redux"
import Router from 'next/router'
import { reset, changeArticleList, changeDoType } from '../../store/blog.redux'
import { connect } from "react-redux"
import { hostname } from "../../config/host.config"
import axios from "../../config/axios"
import BlogLeftItem from './BlogLeftItem'
import { Icon } from 'antd'

class BlogLeft extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            articleList: []
        }
    }

    async getHasPost() {
        const res = await axios.get(hostname + '/blog/user/article')
        if (res.status === 200 && res.data.statusCode === 1) {
            this.setState({ articleList: res.data.statusMsg })
        }
    }

    componentDidMount() {
        this.props.changeArticleList()
        this.props.changeDoType('edit')
    }

    async updateArticle() {
        const res = await axios.get(hostname + '/blog/user/article')
        if (res.status === 200 && res.data.statusCode === 1) {
            return res.data.statusMsg
        } else {
            return []
        }
    }

    async linkToBlogPage() {
        this.props.reset()
        Router.push({
            pathname: '/blog'
        })
    }

    render() {
        const { BlogReducer } = this.props
        const { articleList } = BlogReducer
        return (
            <div>
                <ul>
                    <li className="list-head" onClick={() => this.linkToBlogPage()}>
                        <a className="list-a">新建文章
                            <Icon type="plus-circle" style={{ margin: "0 0 0 30px" }} />
                        </a>
                    </li>
                    {articleList.length > 0 ?
                        <li className="list-content-head"><a className="list-a">下列为过去文章</a></li> : null
                    }
                    {articleList.map((value, key) => (
                        <BlogLeftItem
                            className={parseInt(this.props.BlogReducer.id) === parseInt(value.id) ? 'menu-select' : "list-content"}
                            key={key} title={value.title} id={value.id} />
                    ))}
                </ul>
                <style jsx>{`
                    div {
                        padding-top: 55px;
                        flex: 0 0 220px;
                        background: #f0f2f5;
                        max-height: 100%;
                        overflow: auto;
                    }
                    ul {
                        margin: 0 auto;
                    }
                    .list-head {
                        padding: 10px 50px 10px 50px;
                        height: 62px;
                        font-size: 15px;
                        cursor: pointer;
                        background-color: #c3c3c3;
                        color: white;
                    }
                    .list-content-head {
                        padding: 2px 50px 2px 50px;
                        font-size: 11px;
                    }
                    .list-content-head a{
                        color: #aaaaaa;
                    }
                    .list-content {
                        padding: 10px 50px 10px 50px;
                        height: 62px;
                        font-size: 14px;
                        cursor: pointer;
                    }
                    .list-a{
                        display: flex;
                        align-items: center;
                        width: 100%;
                        height: 100%;
                        color: #2e2e2e;
                    }
                `}</style>
            </div>)
    }
}

const mapStateToProps = ({ BlogReducer }) => ({ BlogReducer })
const mapDispatchToProps = (dispatch) => {
    return {
        reset: bindActionCreators(reset, dispatch),
        changeDoType: bindActionCreators(changeDoType, dispatch),
        changeArticleList: bindActionCreators(changeArticleList, dispatch)
    }
}
export default connect(mapStateToProps, mapDispatchToProps)(BlogLeft)